import React, { Component } from 'react'
import {connect} from 'dva'
import { Table,Card,Button,Input,Modal,message,Form,Icon,Row, Col,Spin } from 'antd';
import Avatar from './upload.js'
import ResetPwd from './resetPwd'
const FormItem = Form.Item;
const confirm = Modal.confirm;
let username = '';
const styles = {
    ipt:{
        width:'10%'
    },
    hdr:{
        display:'flex',
        flexDirection: 'row',
    },
    flx:{
        flex:'1',  
    },
    btnml:{
        marginLeft:'2em',
    },
    limbtm:{
        marginBottom:'2em',
    },
    mrntop:{
        marginTop: '1em',
    },
    tlehed:{
        fontSize: '1em',
        lineHeight:'4em',
    },
    img:{
        width:'100px',
        height:'100px',
        background:'#ccc'
    },
    photo:{
        width:'100%',
        height:'100%',
    },
}
const formItemLayout = {
    labelCol: {
      span: 2,
    },
    wrapperCol: {
      span: 5,
    },
    antFormItemLabel:{
        textAlign:'left',
    }
  };
class UserCenter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            resetModal:false,
            edit:false, 
            imgData:'',
            photoUrl:''
        };
    }
    //点击修改
    editFn = () =>{
        this.setState({
            edit:true,
        })

    }
    //更新图片地址
    handleChangeImg =(img)=>{
        this.setState({
            imgData:img
        })
    }
    //点击保存
    saveFn =()=>{

    }
    // 关闭弹窗
    closeModal = () =>{
        const form = this.form;
        this.setState({
            resetModal:false,
        })
        form.resetFields();
    }
  render() {
      const {form,userCenter} = this.props;
      const {getFieldDecorator} = form;
      const { resetModal,edit } = this.state;
      const {userData} = userCenter;
      console.log(userData);
    return (
        <div>
        <Form ref={this.saveFormRef}>
            <Card title="个人资料" extra={!edit?<Button onClick={this.editFn}><Icon type="edit" /></Button>:<Button onClick={this.saveFn}><Icon type="save" /></Button>}>
                <Row>
                    {edit ? 
                    [
                        <div id="avatar" style={styles.avatar}>
                            <Avatar
                            onChange={this.handleChangeImg}
                            imageUrl={userData ? userData.userimgurl : ''}
                            />
                        </div>
                    ]:[
                        <div style={styles.img}>
                            <img src={userData ? userData.userimgurl : ''} style={styles.photo}/>
                        </div>
                    ]
                    }
                    <Col>
                        {/* <p style={styles.tlehed}>{`姓名：${userData?userData.name:''}`}</p>   */}
                        <p style={styles.tlehed}>{edit?<FormItem {...formItemLayout}>
                        {getFieldDecorator('name', {
                            initialValue:userData?userData.name:'',
                            rules: [
                                { required: true, message: '请输入姓名' }, 
                            ],
                        })(
                            <Input addonBefore={<p>姓名：</p>} placeholder="姓名" />
                        )}
                        </FormItem>:`姓名：${userData?userData.name:''}`}</p>  
                        {/* <p style={styles.tlehed}>{`我的电话：${userData?userData.phone : ''}`}</p> */}
                        <p style={styles.tlehed}>{edit?<FormItem {...formItemLayout}>
                        {getFieldDecorator('phone', {
                            initialValue:userData?userData.phone:'',
                            rules: [
                                { required: true, message: '请输入电话号码' }, 
                            ],
                        })(
                            <Input addonBefore={<p>我的电话：</p>} placeholder="电话号码" />
                        )}
                        </FormItem>:`电话：${userData?userData.phone:''}`}</p>  
                        {/* <p style={styles.tlehed}>{`学校：${userData ? userData.school:''}`}</p> */}
                        <p style={styles.tlehed}>{edit?<FormItem {...formItemLayout}>
                        {getFieldDecorator('school', {
                            initialValue:userData?userData.school:'',
                            rules: [
                                { required: true, message: '请输入学校' }, 
                            ],
                        })(
                            <Input addonBefore={<p>学校：</p>} placeholder="学校名称" />
                        )}
                        </FormItem>:`学校：${userData?userData.school:''}`}</p>
                        {/* <p style={styles.tlehed}>{`院系：${userData ? userData.department:''}`}</p> */}
                        <p style={styles.tlehed}>{edit?<FormItem {...formItemLayout}>
                        {getFieldDecorator('department', {
                            initialValue:userData?userData.department:'',
                            rules: [
                                { required: true, message: '请输入院系' }, 
                            ],
                        })(
                            <Input addonBefore={<p>院系：</p>} placeholder="院系名称" />
                        )}
                        </FormItem>:`院系：${userData?userData.department:''}`}</p>
                        {/* <p style={styles.tlehed}>{`专业：${userData ? userData.specialty:''}`}</p> */}
                        <p style={styles.tlehed}>{edit?<FormItem {...formItemLayout}>
                        {getFieldDecorator('specialty', {
                            initialValue:userData?userData.specialty:'',
                            rules: [
                                { required: true, message: '请输入专业' }, 
                            ],
                        })(
                            <Input addonBefore={<p>专业：</p>} placeholder="专业名称" />
                        )}
                        </FormItem>:`专业：${userData?userData.specialty:''}`}</p>
                        <Button type="primary" onClick={this.showModal}>重置密码</Button>  
                    </Col>
                </Row>
            </Card>
        </Form>
        <ResetPwd
        ref={this.saveFormRef}
        visible={resetModal}
        closeModal={this.closeModal}
        SaveCloseModal={this.SaveCloseModal}
        onReset={this.onReset}
        />
    </div>
    )
  }
}
export default Form.create()(connect(({userCenter})=>({userCenter}))(UserCenter))
// export default Form.create(connect(({userCenter})=>(userCenter)))(UserCenter)
// export default connect(({userCenter})=>({userCenter}))(UserCenter)
